<template>
    <el-card shadow="never">
        <el-input ref="inp" v-model="centerStore.keyWords" prefix-icon="Search" style="width:35%;"></el-input>
        <el-button @click="searchOrderList" size="default" style="margin-left:10px" :loading="loadingButton">搜索</el-button> 
        <!-- :data=""  -->
        <el-table :data="centerStore.allOrderList"  stripe empty-text="你还没有任何订单哦！" style="margin-top:20px;width: 100%;">
            <el-table-column label="订单信息" width="300" prop="orderInfo" align="center"></el-table-column>
            <el-table-column label="购买数量" prop="quantity" align="center"></el-table-column>
            <el-table-column label="单价" prop="price" align="center"></el-table-column>
            <el-table-column label="实付" prop="payment" align="center"></el-table-column>
            <el-table-column label="状态" prop="state" align="center"></el-table-column>
            <el-table-column label="操作" prop="stateInfo" width="200px" align="center" fixed="right">
                <template #default="{row,$index}">
                    <el-button link  type="primary" size="small">确认订单</el-button>
                    <el-button link  type="danger" size="small">删除订单</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { onMounted, ref,computed, nextTick,watch } from 'vue';
import {useCenterStore} from '@/store/modules/center'//引入
const loadingButton=ref(false)
const centerStore = useCenterStore()//获取
const searchWords=ref('')//搜索数据
const inp=ref()
//搜索回调
const searchOrderList=()=>{
    if(centerStore.keyWords){
        loadingButton.value=true
        getOrderList(centerStore.keyWords)
        let id=setTimeout(()=>{
            loadingButton.value=false
            clearTimeout(id)
        },200)
    }else{
        loadingButton.value=true
        getOrderList()
        let id=setTimeout(()=>{
            loadingButton.value=false
            clearTimeout(id)
        },200)
    }
    if(centerStore.keyWords==='5'){
        centerStore.defaultActiveIndex='5'
    }
    if(centerStore.keyWords==='4'){
        centerStore.defaultActiveIndex='4'
    }
    if(centerStore.keyWords==='3'){
        centerStore.defaultActiveIndex='3'
    }
    if(centerStore.keyWords==='2'){
        centerStore.defaultActiveIndex='2'
    }
    if(centerStore.keyWords==='1'){
        centerStore.defaultActiveIndex='1'
    }
    if(centerStore.keyWords==='0'){
        centerStore.defaultActiveIndex='0'
    }

    console.log(centerStore.defaultActiveIndex)
        
}



//页面初始table数据
const getOrderList=async (stateCode='5')=>{
    try {
        //使用
        await centerStore.getAllOrderList(stateCode)
    } catch (error) {
        ElMessage.error('订单列表获取失败')
        console.error(error)
    }

}
computed(()=>{
    // ....
})
// watch(searchWords,(nval,oval)=>{
//     // localStorage.setItem('SEARCH_WORDS',nval)
//     centerStore.keyWords=nval //同步到store
//     // console.log(centerStore.keyWords)

// },{immediate:true})

onMounted(()=>{
    getOrderList()
    nextTick(()=>{//页面加载自动获取焦点
    inp.value.focus()
   })
})
</script>

<style scoped lang="less">

</style>